<template>
    <div>
        <div class="rightTitle">
            <span>充值走势占比分析</span>
            <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
            <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
        </div>
        <div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import "echarts-gl"

export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("chart-container")
            const myChart = echarts.init(chartDom, null, {renderer: "webgl"})
            const option = {
                // title: {
                // 	text: "能耗分布",
                // 	left: "center",
                // },
                tooltip: {
                    trigger: "item",
                    formatter: "{b} : {c} 万"
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: [
                            {value: 120, name: "一卡通"},
                            {value: 120, name: "柜台"},
                            {value: 120, name: "支付宝"},
                            {value: 120, name: "微信"},
                            {value: 120, name: "银联"}
                        ],
                        label: {
                            show: true,
                            // formatter: "{b}: {c}万"
                            formatter: "{b}: {d}%"
                        },
                        itemStyle: {
                            normal: {
                                depth: 30 // 控制饼图厚度，实现3D效果
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
.rightTitle {
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;

    span {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    label {
        text-align: right;
        float: right;
        color: #3b8cfc;
        margin-right: 15px;
        cursor: pointer;
        font-size: 16px;
    }
    .printer {
        color: #3b8cfc;
    }
    .download {
        color: #3b8cfc;
    }
}
</style>
